<template>
  <div class="home">
   <div>
   <van-swipe :autoplay="3000" lazy-render>
   <van-swipe-item v-for="image in images" :key="image">
   <img :src="image" />
   </van-swipe-item>
</van-swipe>
  </div>
  <div class="con">
   <div class="con-wrap" v-for="item1 in homeData" :key="item1.cateId">
   <div class="con-title">{{ item1.catName }}</div>
   <div class="content-wrap">
    <div class="con-content" 
     v-for="item2 in item1.cateData" :key="item2.name"
     @click="toDetail(item2)" >
    <div class="content-name">{{ item2.name }}</div>
    <div class="content-img" >
       <img :src="item2.img" />
    </div> 
   
   </div>
   </div>
   </div>
   </div>
    </div>
</template>


<script>
import  {getCurrentInstance, reactive, toRefs } from 'vue'
import router from '../router/index'
export default{
   setup () {
         const {proxy} = getCurrentInstance()

       const images = [
           'https://i.loli.net/2021/12/03/xw3i8yEzoLDUedf.jpg',
         
           'https://s3.bmp.ovh/imgs/2021/12/fb13e02bfd2383dd.jpg',
         
   ];
       const state = reactive({
           homeData: []
       })

    const getHomeData = () => {
       proxy.$axios.get('/homedata') .then(res => {
           state.homeData = res.dataList;
           localStorage.setItem('lists', JSON.stringify(res.dataList));

       })
    }
    if (localStorage.getItem('lists')){
       state.homeData = JSON.parse(localStorage.getItem('lists'))
    }else{
       getHomeData();
    }

    const toDetail = (goods) => {
       if (localStorage.getItem('isLogin')) {
           router.push({path: 'Detail',query: goods})
       }else{
           proxy.$toast('请先登录')
           setTimeout (() =>{
               router.push('/login')
           },500)
       }
    }
    return {
    images,
    ...toRefs(state),
    getHomeData,
    toDetail
    };
   },
}
</script>

<style scoped>
.home {
   height: 100vh;
   overflow-y: scroll;
}
.van-swipe-item{
   height: 240px;
}
.van-swipe-item img {
   width: 100%;
   height: 100%;
}
.con {
   padding-bottom: 50px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.con-wrp {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}
.con-title{
   width: 100%;
   color: rebeccapurple;
   padding: 0.625rem;
   font-size: 1.375rem;
   margin-left: 0.625rem;
   font-weight: bold;
   border-bottom: 1px solid #ccc;
   margin-bottom: 0.625rem;
}
.content-wrap{
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   padding: 0.625rem 0.9375rem;
}
.con-content{
   width: 8rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}

.content-name{
   width: 6.25rem;
   font-size: 0.875rem;
   color: #ccc;
   padding: 0.625rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.content-img{
   width: 6.25rem;
   height: 6.25rem;
}
.content-img img{
   width: 100%;
   height: 100%;
}
</style>